<template>
<div :class="{'active': active}" class="sidebar_item">
  <a :href="link">
    <font-awesome-icon class="icon" :icon="icon" />
    <span class="text">{{text}}</span>
  </a>
</div>
</template>

<script setup>
const props = defineProps({
  link: {
    type: String,
    required: true,
    default: '/admin'
  },
  icon: {
    type: String,
    required: true,
    default() {
      return 'ban'
    }
  },
  text: {
    type: String,
    required: true,
    default: '管理'
  },
  active: {
    type: Boolean,
    required: false,
    default: false
  }
})
</script>

<style scoped>
.sidebar_item {
  font-size: 19px;
  margin-bottom: 40px;
  color: #999999;
}

.sidebar_item a {
  color: #666666;
  text-decoration: none;
}

.sidebar_item.active a {
  color: #409EFF;
}

.text {
  margin-left: 20px;
}
</style>